<template>
  <!--  -->
  <div class="BigDiv">
    <el-avatar
    v-if="userGender=='女'"
    class="UserAvatar"
      :size="120"
      shape="square"
      :fit="fit"
      src="https://img14.360buyimg.com/pop/jfs/t1/43846/29/18731/27390/6301cae0E6cc9bbf9/498d0b98922528b2.jpg"
    >
    </el-avatar>
    <el-avatar
    v-if="userGender=='男'"
    class="UserAvatar"
      :size="120"
      shape="square"
      :fit="fit"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.soogif.com%2F1ZRFIjUQ0Tn1uRKCCS1M5F7OgbrrAD6i.png&refer=http%3A%2F%2Fimg.soogif.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664508783&t=a3bcd6b7779018b6bc3ad1393af034b4"
    >
    </el-avatar>
    <div class="div2">
      <a class="myhrefUserAside" href="/usereditinformation">编辑个人资料</a>
    </div>
    <div class="div">
      <p class="intro">个人简介</p>
      <p class="introContent">{{ userIntroduction }}</p>
    </div>
    <div>
      <div class="div">
        <div class="inlineBlock">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="1em"
            height="1em"
            fill="currentColor"
            style="margin-right: 10px"
          >
            <path
              fill-rule="evenodd"
              d="M12.048 2a9.913 9.913 0 00-6.511 2.44 10.308 10.308 0 00-3.407 6.171 10.436 10.436 0 001.323 6.954 10.079 10.079 0 005.422 4.418c.505.095.684-.226.684-.497v-1.744c-2.804.624-3.396-1.378-3.396-1.378a2.738 2.738 0 00-1.115-1.504c-.906-.63.074-.63.074-.63.317.046.62.165.886.348.266.184.488.426.648.71.137.252.32.475.541.655a2.128 2.128 0 001.582.463c.28-.033.551-.122.798-.262a2.198 2.198 0 01.616-1.372c-2.23-.258-4.572-1.14-4.572-5.035a4.013 4.013 0 011.03-2.75 3.813 3.813 0 01.098-2.713s.844-.277 2.76 1.05a9.303 9.303 0 015.028 0c1.917-1.327 2.755-1.05 2.755-1.05.37.85.413 1.811.123 2.693a4.014 4.014 0 011.029 2.75c0 3.94-2.348 4.803-4.584 5.036.24.246.425.542.543.868.118.326.166.674.14 1.02v2.814c0 .333.18.591.69.49a10.085 10.085 0 005.346-4.434 10.437 10.437 0 001.29-6.91 10.31 10.31 0 00-3.373-6.132A9.916 9.916 0 0012.048 2z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </div>
        <div class="inlineBlock">{{ userName }}</div>
      </div>
    </div>
    <div class="div">
      <div class="inlineBlock">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="1em"
          height="1em"
          fill="currentColor"
          style="margin-right: 10px"
        >
          <path
            fill-rule="evenodd"
            d="M16.008 12.124A1.017 1.017 0 0116 12V7.586l-1.121 1.121a1 1 0 11-1.415-1.414l2.829-2.829a1 1 0 011.414 0l2.828 2.829a1 1 0 11-1.414 1.414L18 7.586V12c0 .042-.003.083-.008.124A4.002 4.002 0 0117 20a4 4 0 01-.992-7.876zm-8.016-.248c.005.04.008.082.008.124v1h2a1 1 0 110 2H8v4a1 1 0 11-2 0v-4H4a1 1 0 110-2h2v-1c0-.042.003-.083.008-.124A4.002 4.002 0 017 4a4 4 0 01.992 7.876zM7 10a2 2 0 100-4 2 2 0 000 4zm10 4a2 2 0 100 4 2 2 0 000-4z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </div>
      <div class="inlineBlock">{{ userGender }}</div>
    </div>
    <div class="div">
      <p>邮箱: {{ userEmail }}</p>
    </div>
    <div class="div">
      <p>特长: {{ userSpecialty }}</p>
    </div>
    <div class="div">
      <p>积分: {{ userMoney }}</p>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "UserHomePageAside",
  data() {
    return {
      userName: "",
      userEmail: "",
      userGender: "",
      userSpecialty: "",
      userIntroduction: "",
      userMoney: "",
    };
  },
  created() {
    this.findUserByToken();
  },
  methods: {
    //由token找user
    findUserByToken() {
      request.get("/secure/getUserInfo").then((res) => {
        this.userName = res.data.username;
        this.userEmail = res.data.email;
        this.userMoney = res.data.money;
        if (res.data.gender == 1) this.userGender = "男";
        else this.userGender = "女";

        this.userSpecialty = res.data.specialty;
        this.userIntroduction = res.data.introduction;
        window.sessionStorage.setItem("ssh", res.data.ssh);
      });
    },
  },
};
</script>
<style scoped>
.div {
  font-family: 微软雅黑;
  margin-bottom: 15px;
  margin-left: 12%;
}
.UserAvatar {
  font-size: 40px;
  vertical-align: middle;
  /* background-color: rgba(100, 148, 237, 0.651); */
  margin-top: 30px;
  margin-left: 12%;
  margin-bottom: 15px;
}
.BigDiv {
  width: 250px;
  height: 90vh;
  background-color: #28282808;
  border-radius: 1%;
  margin: 20px;
}
.inlineBlock {
  display: inline-block;
}
.intro {
  color-scheme: dark;
  font-variant: tabular-nums;
  border: 0 solid;
  box-sizing: border-box;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.introContent {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.625;
  word-break: break-all;
  margin-right: 20px;
}
.myhrefUserAside {
  text-decoration: none;
  font-size: 15px;
  left: 13%;
  top: 5px;
  color: white;
  position: absolute;
}
.div2 {
  background-color: rgba(0, 0, 0, 0.493);
  width: 50%;
  text-align: center;
  height: 30px;
  margin-left: 12%;
  border-radius: 7px;
  margin-bottom: 10px;
  position: relative;
}
.div2:hover {
  background-color: rgba(139, 115, 6, 0.781);
}
</style>
